<template>
  <section>
    <el-row>
      <el-button type="primary"  @click="dialogFormVisible = true">新建分类</el-button>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index"  label="序号"> </el-table-column>
      <el-table-column prop="typePic" label="图片" width="180">
        <template slot-scope="scope">
          <img  :src="scope.row.typePic" alt="" style="width: 200px;height: 100px">
        </template>
      </el-table-column>
      <el-table-column prop="type" label="关联的商品信息"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button  size="mini" type="danger"  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog  :visible.sync="dialogFormVisible">

       <el-dialog :visible.sync="dialogVisible">
         <img   :src="dialogImageUrl" alt="">
       </el-dialog>

      <el-upload class="upload-demo" action="" list-type = "picture-card" :on-change = "files" :limit=1 :file-list="fileList" :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      </el-upload>

      <!--<form>-->
        <!--<input type="text" value="" v-model="typename" placeholder="请输入用户名">-->
        <!--<input type="file"  name="image" @change="getFile($event)">-->
        <!--<button @click="submitForm($event)">提交</button>-->
      <!--</form>-->
      <el-form :model="form" :rules="rules" ref="form">
          <el-form-item prop="typename">
            <el-input type="text" v-model="form.typename" name="typename" auto-complete="off" placeholder="输入类型名称"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.native.prevent="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog  :visible.sync="edittype">

      <!--<el-dialog :visible.sync="editdialogVisible">-->

      <!--</el-dialog>-->
      <el-row :gutter="20">
        <el-col :span="6">
         <img v-if="editdialogVisible" width="148px" height="148px" :src="editImageUrl" alt="">
        </el-col>
      <el-col :span="18">
        <el-upload class="upload-demo" action=""  list-type = "picture-card" :on-change = "editfiles" :limit=1 :file-list="fileList" :auto-upload="false">
           <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        </el-upload>
      </el-col>
      </el-row>
      <el-form :model="form2" :rules="rules2" ref="form2">
      <el-form-item prop="edittypename">
      <el-input type="text" v-model="form2.edittypename" name="edittypename" auto-complete="off" placeholder="输入类型名称"></el-input>
      </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="edittype = false">取 消</el-button>
        <el-button type="primary" @click.native.prevent="editSubmit">确 定</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>
  import axios from "axios"

  export default {
    data() {
      return {
        message:"",
        imageUrl: '',
        tableData:[],
        dialogFormVisible:false,
        dialogImageUrl: '',
        editImageUrl:'',
        dialogVisible: false,
        editdialogVisible:true,
        edittype:false,
        fileList:[],
        param:'',
        file: '',
        typename:'',
        typwid:"",
        editfile:{},
        typefile:{},
        form: {
          typename: '',
         },
        rules: {
          typename: [
            { required: true, message: '请输入类型名称', trigger: 'blur' },
          ],
        },
        form2: {
          edittypename: '',
        },
        rules2: {
          edittypename: [
            { required: true, message: '请输入类型名称', trigger: 'blur' },
          ],
        },
      };
    },
    mounted(){
      this.init()
    },
    methods: {
      // getFile(event) {
      //   this.file = event.target.files[0];
      //   console.log(this.file);
      // },
      // submitForm(event) {
      //   event.preventDefault();
      //   let formData = new FormData();
      //   formData.append('typename', this.typename);
      //   formData.append('image', this.file);
      //
      //   let config = {
      //     headers: {
      //       'Content-Type': 'multipart/form-data'
      //     }
      //   }
      //
      //   axios.post('/typelist/addType', formData, config).then(function (res) {
      //   console.log(res)
      //   })
      // },
      open() {
        this.$message(this.message);
      },
      beforeupload(file){
        console.log(file);
        //创建临时的路径来展示图片
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      files(file, fileList){

        this.typefile = file;
      },
      handleSubmit( ) {
        this.$refs.form.validate((valid) => {
          let  param = new FormData();
          param.append('image', this.typefile.raw);
          param.append('typename', this.form.typename);
         let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        console.log(this.param)
        axios.post("/typelist/addType",param ,config).then((ress)=>{
          let res = ress.data;
          if(res.status == "0"){
            this.dialogFormVisible = false;
            this.fileList=[];
            this.typefile = {};
            this.form.typename="";
            this.init()
          }else{
            this.message = res.msg;
            this.open();
          }
        })
        })
      },
      init(){
        axios.get("/typelist/getType").then((response)=>{
          let res = response.data;
          this.tableData = res.result.list;
        })
      },
      handleDelete(tab) {
        console.log(tab)
        axios.post("/typelist/delType",{

          id: this.tableData[tab]._id

        }).then((ress)=>{
          let res = ress.data;
          if(res.status == "0"){
            this.init()
          }else{

          }
        })
      },

      ///////////////////////////////////////////////////////////

      handleEdit(tab ,row){
        console.log(row)
        this.edittype = true;
        this.fileList=[];
        this.editfile={};
        this.editdialogVisible = true;
        this.editImageUrl = row.typePic;
        this.form2.edittypename = row.type;
        this.typwid = row._id;
      },
      editfiles(file){

        this.editdialogVisible = false;
        this.editImageUrl = file.url;
        this.editfile = file ;

      },
      editSubmit( ) {
        this.$refs.form2.validate((valid) => {
          if(valid){
            let param = new FormData();
            param.append('image', this.editfile.raw);
            param.append('typename', this.form2.edittypename);
            param.append('id', this.typwid);

            let config = {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }
            console.log( param)
            axios.post("/typelist/editType", param ,config).then((ress)=>{
              let res = ress.data;
              if(res.status == "0"){
                this.edittype = false;
                this.editfile="";
                this.form2.edittypename="";
                this.init()
              }else{
                this.message = res.msg;
                this.open();
              }
            })
          }
        })
      },
    }
  }
</script>

<style  lang="scss" scoped>
  .el-input{
    width: 200px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .el-tabs{
    margin-top: 20px;
  }
  .el-button{
    margin : 20px 0;
  }
  .img{
    width: 200px;
    height: 200px;
  }
</style>
